import React from 'react';
import { Select } from 'antd';
import { AxFormItemBase } from '../lib/AxFormItemBase';
import { AxLabel } from '@/components/AxBase';
import { useEffect, useState } from 'react';
import { AxSelectProps } from './AxSelectProps';

/**
 * 自定义下拉框
 * @param label 标签
 * @param field 字段名称
 * @param value 值
 * @param data 选项数据 [{ value: '1', text: 'Demo' }]
 * @param mode 模式 'multiple' | 'tags' | '-'
 * @param allowClear 允许为空（默认：true）
 * @param placeholder 占位符
 * @param required 是否必填
 * @param message 提示信息（如果添加了，所有错误提示为改信息）
 * @param validator 自定义验证函数
 * @param hidden 是否隐藏
 * @param autoSelect 当只有一个选项时，自动选中（默认false）
 */
const AxSelectEx: React.FC<AxSelectProps> = props => {
  let { label, onChange } = props;
  const {
    form,
    field,
    fiExtra,
    data = [],
    mode = '-',
    isLabel = false,
    allowClear = true,
    autoSelect = false,
    maxTagCount = 1,
    value: valueFromProps,
    children: childrenFromProps,
    placeholder = `请选择${label}`,
    ...rest
  } = props;
  /** 构造Option */
  const [children, setChildren] = useState<any>();
  /** 构造value */
  const [value, setValue] = useState<any>();
  /** FormItem的提示信息 */
  const [fiHelp, setFiHelp] = useState<any>(fiExtra);
  /** FormItem的校验状态 */
  const [fiValidateStatus, setFiValidateStatus] = useState<any>(fiExtra && "validating"); //warning

  /** 展示为Label */
  const WrappedComponent = isLabel === true ? AxLabel : Select;

  useEffect(() => {
    /** 不为Label时，才需要构造Option */
    if (isLabel === false) {
      if (childrenFromProps) {
        setChildren(childrenFromProps);
      } else {
        setChildren(data.map((d: any, idx: any) => (
          <Select.Option
            key={idx}
            value={d.value === true ? true : d.value === false ? false : d.value}
          >
            {d.text}
          </Select.Option>
        )));
      }
      setValue(valueFromProps);
    } else {
      /** 当为Label时，将value赋值为text */
      const obj = data.find((i: any) => i.value === valueFromProps);
      if (obj) {
        setValue(obj.text);
      }
      else {
        setValue(valueFromProps);
      }
    }

    /** 当只有一个选项时，自动选中 */
    if (autoSelect === true && data.length === 1) {
      const v = data[0].value;
      field && form.setFieldsValue({ [field]: v });
      if (onChange) onChange(v, <div></div>);
    }
    else {
      /** 多选 */
      if (Array.isArray(valueFromProps)) {
        if (valueFromProps.length > 0) {
          if (data.find((i: any) => i.value === valueFromProps[0])) {
            field && form.setFieldsValue({ [field]: valueFromProps });
            if (onChange) onChange(valueFromProps, <div></div>);
          }
          else {
            field && form.setFieldsValue({ [field]: undefined });
          }
        }
        else {
          field && form.setFieldsValue({ [field]: undefined });
        }
      }
      else {
        /** 单选 */
        if (data.find((i: any) => i.value === valueFromProps)) {
          field && form.setFieldsValue({ [field]: valueFromProps });
          if (onChange) onChange(valueFromProps, <div></div>);
        }
        else {
          field && form.setFieldsValue({ [field]: undefined });
        }
      }
    }

    /** 不等于原始数据（请求后没有数据） */
    if (data && (data['ax_time_stamp'] || data.length > 0)) {
      setFiHelp(undefined);
      setFiValidateStatus(undefined);
    }
  }, [data, valueFromProps, isLabel])

  const localProps = {
    mode,
    allowClear,
    maxTagCount: maxTagCount //最多显示多少个 tag
  }

  return (
    <AxFormItemBase
      form={form}
      field={field}
      value={value}
      children={children}
      placeholder={placeholder}
      style={{ width: '100%' }}
      fiHelp={fiHelp}
      fiValidateStatus={fiValidateStatus}
      WrappedComponent={WrappedComponent}
      {...localProps}
      {...rest}
    />
  );
}

export const AxSelect: React.FC<AxSelectProps> = (props) => {
  const { data: dataFromProps = [], ...rest } = props;
  const [data, setData] = useState<any>([]);

  useEffect(() => {
    if (JSON.stringify(data) !== JSON.stringify(dataFromProps)) {
      setData(dataFromProps);
    }
    else if (dataFromProps['ax_time_stamp']) {  //说明查询了数据，只是数据为[]
      setData(dataFromProps);
    }
  }, [dataFromProps]);

  return (
    <AxSelectEx
      data={data}
      {...rest}
    />
  );
}

/** 自定义 margin-bottom:0px 的Select */
export const AxSelectNoMarginBottom: React.FC<AxSelectProps> = props => {
  return <AxSelect formItemClassName="ant-form-item-ax" {...props} />;
};